<template>
	<view class="pageV">
		<u-navbar title="我的" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#00000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<view class="cenV">
			<image class="topIv" src="https://i.328888.xyz/2023/04/18/i6BmAv.png" mode="scaleToFill"></image>
			<view class="infoVV">
				<view class="infoV">
					<image class="avatarIv" :src="userInfo.avatar"></image>
					<view class="nameV">
						<view class="nameTv">{{userInfo.nickname}}</view>
						<view class="vipV" v-if="userInfo.vip==1">
							<image class="vipIv" src="../../static/me/vip.svg"></image>
							<view class="vipTv">普通会员</view>
						</view>
					</view>
					<u-icon name="arrow-right" color="#E8E8E8" size="15"></u-icon>
				</view>

				<view class="orderV">
					<view class="orderTv">我的订单</view>
					<view class="orderTypeV">
						<view class="orderItemV" @click="onOrderClick(1)">
							<image class="orderItemIv" src="https://s1.ax1x.com/2023/07/22/pCq1VxO.png"></image>
							<view class="orderItemTv">待付款</view>
						</view>
						
						<view class="orderItemV" @click="onOrderClick(2)">
							<image class="orderItemIv" src="https://s1.ax1x.com/2023/04/18/p9icTpQ.png"></image>
							<view class="orderItemTv">待发货</view>
						</view>
						
						<view class="orderItemV" @click="onOrderClick(3)">
							<image class="orderItemIv" src="https://s1.ax1x.com/2023/04/18/p9icIfg.png"></image>
							<view class="orderItemTv">待收货</view>
						</view>
						
						<view class="orderItemV"  @click="onOrderClick(4)">
							<image class="orderItemIv" src="https://s1.ax1x.com/2023/07/22/pCq1mse.png"></image>
							<view class="orderItemTv">待评价</view>
						</view>
					</view>
				</view>
				
				<view class="orderV">
					<view class="orderTypeV">
						<view class="orderItemVto" @click="onAddressClick()">
							<image style="height: 45rpx; width: 35rpx;" class="orderItemIv" src="https://s1.ax1x.com/2023/04/18/p9icxtU.png"></image>
							<view class="orderItemTv">收货地址</view>
						</view>
						
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				userInfo: {
					nickname: "我要健身",
					avatar: ""
				},
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync("user_info");
		},
		methods: {
			onAddressClick(){
				this.$u.route({
					url: "/shop/addressAdd/address",
				})
			},
			onOrderClick(typ){
				this.$u.route({
					url: "/shop/order/order",
					params: {
						type:typ
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pageV {
		width: 100vw;
		min-height: 100vh;
	}

	.cenV {
		position: fixed;
		top: 0rpx;
		width: 100%;
	}

	.topIv {
		width: 100%;
		height: 420rpx;
	}

	.infoVV {
		position: absolute;
		top: 180rpx;
		width: 100%;
	}

	.infoV {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;

		.avatarIv {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-color: antiquewhite;
		}

		.nameV {
			margin-left: 25rpx;
			flex: 1;

			.nameTv {
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.vipV {
				width: 160rpx;
				height: 40rpx;
				display: flex;
				margin-top: 30rpx;
				border-radius: 20rpx;
				border: 1rpx solid #979797;
				align-items: center;
				justify-content: center;

				.vipIv {
					width: 24rpx;
					height: 24rpx;
				}

				.vipTv {
					font-size: 24rpx;
					color: #8D8D8D;
					margin-left: 11rpx;
				}
			}
		}
	}

	.orderV {
		margin-top: 40rpx;
		background: #1F1F1F;
		border-radius: 10rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
	}

	.orderTv {
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.orderTypeV {
		display: flex;
		margin-top: 40rpx;
	}

	.orderItemV {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
	
	.orderItemVto {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 40rpx;
	}

	.orderItemIv {
		width: 50rpx;
		height: 50rpx;
	}

	.orderItemTv {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #8D8D8D;
	}
</style>
